<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Performance Analysis Report</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f2f5;
            color: #333;
            margin: 0;
            padding: 20px;
        }
        h1, h2, h3 {
            color: #4CAF50;
        }
        h3 {
            word-wrap: break-word;
            max-width: 100%;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        th, td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: left;
            word-wrap: break-word;
            max-width: 300px;
        }
        th {
            background-color: #4CAF50;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f2f2f2;
        }
        tr:hover {
            background-color: #ddd;
            cursor: pointer;
        }
        .container {
            max-width: 1200px;
            margin: auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.4);
            padding-top: 60px;
        }
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-height: 80%;
            overflow-y: auto;
        }
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
        code {
            display: block;
            background-color: #f4f4f4;
            padding: 10px;
            border-radius: 5px;
            margin-top: 10px;
            white-space: pre;
            overflow-x: auto;
            font-size: 1.5em;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="container">
        <h1>Performance Analysis Report</h1>

        <h2>Aggregated by File</h2>
        {% for file in aggregated_by_file %}
            <h3>{{ file.source_file_path | safe}}</h3>
            <p><strong>Total Event Count:</strong> {{ file.total_event_count }}</p>
            <p><strong>Total Event Percentage:</strong> {{ file.total_event_percentage }}</p>
            <canvas id="topdown_{{ loop.index }}"></canvas>
            <script>
                var ctx = document.getElementById('topdown_{{ loop.index }}').getContext('2d');
                var chart = new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: [{% for line in file.lines %}'{{ line.source_line }}',{% endfor %}],
                        datasets: [{
                            label: 'Event Count',
                            data: [{% for line in file.lines %}{{ line.event_count }},{% endfor %}],
                            backgroundColor: 'rgba(75, 192, 192, 0.2)',
                            borderColor: 'rgba(75, 192, 192, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true
                            }
                        }
                    }
                });
            </script>
            <table>
                <thead>
                    <tr>
                        <th>Source Line</th>
                        <th>Event Count</th>
                        <th>Event Percentage</th>
                    </tr>
                </thead>
                <tbody>
                    {% for line in file.lines %}
                        <tr onclick="showModal('{{ file.source_file_path }}', '{{ line.source_line }}', '{{ line.event_count }}', '{{ line.event_percentage }}')">
                            <td>{{ line.source_line | safe}}</td>
                            <td>{{ line.event_count }}</td>
                            <td>{{ line.event_percentage }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endfor %}

        <h2>Aggregated Results</h2>
        <table>
            <thead>
                <tr>
                    <th>Source File Path</th>
                    <th>Source Line</th>
                    <th>Event Count</th>
                    <th>Event Percentage</th>
                </tr>
            </thead>
            <tbody>
                {% for result in aggregated_results %}
                    <tr onclick="showModal('{{ result.source_file_path }}', '{{ result.source_line }}', '{{ result.event_count }}', '{{ result.event_percentage }}')">
                        <td>{{ result.source_file_path | safe}}</td>
                        <td>{{ result.source_line }}</td>
                        <td>{{ result.event_count }}</td>
                        <td>{{ result.event_percentage }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">×</span>
            <h2>Assembly Code</h2>
            <code id="assemblyCode">
            </code>
        </div>
    </div>
    <script>
        var modal = document.getElementById("myModal");
        var span = document.getElementsByClassName("close")[0];

       function showModal(filePath, sourceLine, eventCount, eventPercentage) {
            var key = filePath + ':' + sourceLine;
            var assemblyInfo = {{ assembly_info | tojson }};
            var assemblyCode = assemblyInfo[key] || 'Assembly code not found';
            assemblyCode = `; Source file path for: ${filePath}\n` +
                           `; Assembly Code for: ${sourceLine}\n` +
                           `; Event Count: ${eventCount}\n` +
                           `; Event Percentage: ${eventPercentage}\n\n` + assemblyCode;
            document.getElementById("assemblyCode").textContent = assemblyCode;
            modal.style.display = "block";
        }

        span.onclick = function() {
            modal.style.display = "none";
        }

        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>

</body>
</html>
